<template>
  <div>
    <div class="bjtk">
      <div class="bjtk_list">
        <div class="head">
          <h2>请提交您的报价</h2>
          <a-button class="editable-add-btn" @click="close">
            <a-icon type="close" />
          </a-button>
        </div>
        <div class="bj">
          <p>提交后对方会在手机上收到您的报价</p>
          <p>
            <span class="xh_pp">型号：{{$store.state.bjdata.gg}}</span>
            <span class="xh_pp">品牌：{{$store.state.bjdata.pp}}</span>
            <span class="xh_pp">库存：<span class="red">{{kcNum.num}}</span></span>
          </p>
          <div class="list">
            <span class="tit">
              <i>*</i>报价：
            </span>
            <a-input-number
              size="large"
              style="width:150px;"
              :min="1"
              :max="100000"
              v-model="hsdj"
              @change="bjChange"
            />
            <span style="margin:0 10px;">元/套</span>
            <a-radio-group class="radio" @change="hsChange" v-model="valuebj">
              <a-radio :value="1">含税</a-radio>
              <a-radio :value="0">不含税</a-radio>
            </a-radio-group>
            <p class="ts" v-if="tsbj">
              <a-icon type="close-circle" />报价不能为空
            </p>
          </div>

          <div class="list">
            <span class="tit">
              <i>*</i>可供量：
            </span>
            <a-input-number
              size="large"
              :min="1"
              :max="100000"
              style="width:150px;"
              v-model="kgsl"
              @change="kglChange"
            />
            <span style="margin:0 10px;">套</span>
            <p class="ts" v-if="tskgsl">
              <a-icon type="close-circle" />可供量不能为空
            </p>
          </div>
          <div class="list">
            <span class="tit">备注：</span>
            <a-textarea class="text" placeholder="选填如规格细节等" :rows="3" v-model="bjbz" />
          </div>
          <div class="list_btn">
            <a-button @click="Addbaojia" type="primary">提交报价</a-button>
          </div>
        </div>
        <div class="jsgs"  v-if="kcNum.paijia>0||kcNum.WLTEJIA>0">
          <span class="tit">计算公式：</span>
          <ul>
            <li v-if="kcNum.paijia>0">
              <span class="money">￥{{kcNum.paijia}}</span>
              <span class="ride">X</span>
              <a-input-number @change="paijiaride" v-model="paijia" :min="0"   />
              <span>%</span>
              <span class="and">=</span>
              <span>￥</span>
              <a-input-number @change="paijiaodd"  style="width:100px" v-model="paijianum"   :min="0" />
            </li>
            <li v-if="kcNum.WLTEJIA>0">
              <span class="money">￥{{kcNum.WLTEJIA}}</span>
              <span class="ride">X</span>
              <a-input-number @change="tjride" v-model="wltj" :min="0"  />
              <span>%</span>

              <span class="and">=</span>
              <span>￥</span>
              <a-input-number @change="tjodd" style="width:100px" v-model="wltjnum" :min="0" />
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";

export default {
  data() {
    return {
      hsdj: "", //报价价格
      valuebj: 1, //含税获不含税，默认含税
      kgsl: "", //可供数量
      bjbz: "", //报价备注,
      bjdata: {},
      tsbj: false,
      tskgsl: false,
      kcNum: "",
      paijia: "",
      wltj: "",
      paijianum: "",
      wltjnum: ""
    };
  },

  methods: {
    //关闭弹出框
    close() {
      this.$store.state.tjwz = false;
    },
    //报价更新
    bjChange(value) {
      //console.log("changed", value);
      this.hsdj = value;
    },
    //可供数量更新
    kglChange(value) {
      this.kgsl = value;
    },
    //含税获不含税
    hsChange(e) {
      //console.log("radio checked", e.target.value);
      this.valuebj = e.target.value;
    },
    //提交报价
    Addbaojia() {
      //获取报价的值判断
      if (!this.hsdj) {
        this.tsbj = true;
        return false;
      } else {
        this.tsbj = false;
      }

      //获取可供数量的值判断
      if (!this.kgsl) {
        this.tskgsl = true;
        return false;
      } else {
        this.tskgsl = false;
      }

      this.axios
        .post(
          "baojia/Addbaojia.php",
          qs.stringify({
            phone: this.$store.state.bbl_phone, //报价人手机号
            sqdwid: this.$store.state.bbl_sqdwid, //报价人授权单位ID
            xjxh: this.bjdata.xjxh, //询价单号
            xjrq: this.bjdata.xjrq, //询价日期
            gg: this.bjdata.gg, //型号
            pp: this.bjdata.pp, //品牌
            jldw: this.bjdata.jldw, //计量单位
            sl: this.bjdata.sl, //数量
            yqdhq: this.bjdata.yqdhq, //要求到货期
            jhd: this.bjdata.jhd, //交货地
            kgsl: this.kgsl, //可供数量
            xjgsmc: this.bjdata.xjgsmc, //询价公司名称
            xjgsbm: this.bjdata.xjgsbm, //询价公司编码
            hsdj: this.hsdj, //报价价格
            bjbz: this.bjbz, //备注
            fplx: this.valuebj, //含税获不含税
            xjdwid: this.bjdata.sqdwid //询价企业授权单位ID
          })
        )
        .then(res => {
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
            //成功后关闭弹出框
            this.$store.state.tjwz = false;
            //报价成功后,历史报价数加1
            this.bjdata.bjs++;
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    },
    getkcNum() {
      this.axios
        .post(
          "baojia/getkcNum.php",
          qs.stringify({
            sqdwid: this.$store.state.bbl_sqdwid,
            xl: this.$store.state.bjdata.gg,
            sccjc: this.$store.state.bjdata.pp
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.kcNum = res.data.result;
          }
        });
    },
    paijiaride() {
      this.paijianum = Number(this.kcNum.paijia) * Number(this.paijia / 100).toFixed(2);
    },
    paijiaodd(){
      this.paijia = Number(this.paijianum) / Number(this.kcNum.paijia).toFixed(2);

    },
  
    tjride() {
      this.wltjnum = (Number(this.kcNum.WLTEJIA) * Number(this.wltj / 100)).toFixed(2);
    },
      tjodd(){
      this.wltj = (Number(this.wltjnum) / Number(this.kcNum.WLTEJIA)*100).toFixed(2);

    },
  },

  created() {
    this.bjdata = this.$store.state.bjdata;
    this.getkcNum();
  }
};
</script>

<style lang='less' scoped>
.bjtk {
  position: absolute;
  z-index: 9999;
  width: 45%;
  height: auto;
  background-color: #fff;
  text-align: left;
  padding: 20px;
  top: 77px !important;
  left: 50%;
  transform: translateX(-50%);

  .bjtk_list {
    .head {
      display: flex;
      justify-content: space-between;
    }

    .bj {
      .xh_pp {
        margin-right: 20px;
        font-weight: bold;
        .red{
            color: red;
        }
      }
      .ts {
        margin: 5px 0 0 75px;
        color: red;
        font-size: 12px;
        i {
          margin: 0 5px;
        }
      }
      .list {
        margin: 20px 0;

        .tit {
          display: inline-block;
          width: 80px;
          text-align: right;

          i {
            color: #ff0000;
            padding: 0 4px;
          }
        }

        .radio {
          margin-left: 10px;
        }

        .text {
          width: 288px;
          vertical-align: top;
        }
      }

      .list_btn {
        text-align: center;

        button {
          width: 200px;
          height: 40px;
        }
      }
    }
    .jsgs {
      .tit {
        display: inline-block;
        width: 80px;
        text-align: right;
      }
      ul {
        li {
          //   text-align: center;
          padding: 0 10px;
          margin: 10px 0;
          .ride {
            font-size: 18px;
            display: inline-block;
            width: 100px;
            text-align: left;
          }
          .and {
            font-size: 18px;
            display: inline-block;
            width: 100px;
            text-align: center;
          }
          .money {
            display: inline-block;
            width: 100px;
            text-align: left;
          }
        }
      }
    }
  }
}
</style>
